<template>
<div class='demo'>
  <van-nav-bar title="商品详情"  left-arrow @click-left="onClickLeft">
  <van-icon name="search" slot="right" size="20px"/>
</van-nav-bar>
  <div class="slideshow">

    <van-swipe @change="onChange">
  <van-swipe-item v-for="(item,index) in imgList" :key="index">

    <div class="uiui">
        <img v-lazy="item.img" class="lazy"/>
    </div>
  </van-swipe-item>
  <div class="custom-indicator" slot="indicator">
    {{ current + 1 }} / {{imgList.length}}
  </div>
</van-swipe>
  </div>




<div class="waiceh">
    <div class="Price-and-Description">
    <div class="price">
      <div class="number">
        <span class="icon">￥</span>
        <span class="tatol">10.00</span>
        </div>
      <div class="Browsing-and-Sales">
        <div class="Browsing">
          <span>2222</span>
          <span>浏览</span>
        </div>
        <div class="Sales">
            <span>434</span>
          <span>销量</span>
        </div>
      </div>
    </div>
    <div class="description">号称撒大大大访问团日文歌热热</div>
  </div>
</div>

<div class="Specifications-choice">
  <div class="choice">
    <div class="Specifications">选择规格</div>
    <div class="iconArrows">></div>
  </div>
</div>


  <div class="GraphicDetails">
    <div class="details">图文详情</div>
  </div>
<van-goods-action>
  <van-goods-action-icon icon="cart-o" text="购物车" />
  <van-goods-action-icon icon="shop-o" text="店铺" />
  <van-goods-action-button type="warning" text="加入购物车" />
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>

</div>
</template>
<script>
export default {
name:'',
components:{
},
data(){
return{
  current:0,
  imgList:[
   
    {
      img:require('../assets/image/1.jpg')
    },
    {
      img:require('../assets/image/1.jpg')
    },
  ]
}
},
methods:{
  onChange(index){
     this.current = index;
  },
  onClickLeft(){
    this.$router.go(-1)
  }

} 
}
</script>
<style lang='less' scoped>
.demo{
  .slideshow{
    width:100% ;
    box-sizing: border-box;
    .uiui{
      padding: 22px 0 0;
      .lazy{
  
      display: block;
      margin: auto;
      width:300px;
      height:300px;
      object-fit: cover;
    }
    }
    
    .custom-indicator{
      float: right;
      margin-right: 10px;
      background-color: rgba(71, 71, 71, 0.274);
      text-align: center;
      padding:2px 5px 2px;
      line-height: 14px;
      color: white;
    }
  }
  .waiceh{
    margin-top: 9px;
    padding: 3px;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
  
  .Price-and-Description{
    display: flex;
    // flex-direction: column;
    flex-wrap: wrap;
    align-content: space-around;
    width: 100%;
    background: white;
    border-radius: 10px;
    height: 70px;
      // border: 1px solid red;
    box-sizing: border-box;
    padding: 0 3px 7px;
    .price{
      display: flex;
      justify-content: space-between;
      // align-items: center;
      width: 100%;
      // border: 1px solid red;
    .number{
      color: orangered;
      text-align: center;
     
      .tatol{
         font-size: 23px;
      }
      .icon{
         font-size: 10px;

      }
    }
    .Browsing-and-Sales{
      // border: 1px solid red;
      height: 30px;
      width: 20%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgba(136, 136, 133, 0.568);
      font-size: 4px !important;
      .Browsing{
    

        display: flex;
        flex-direction: column;
      }
      .Sales{
        display: flex;
         flex-direction: column;
      }
    }
    }
    .description{
      // border: 1px solid red;
      color: rgba(136, 136, 133, 0.568);
    }
  }
  }
  .Specifications-choice{
     margin-top: 7px;
    padding: 3px;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    .choice{
      background: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 10px;
       width: 100%;
        height: 50px;
      .Specifications{
        text-align: center;
        width: 70px;
        margin-left: 20px;
        line-height: 70px;
      }
      .iconArrows{
      text-align: center;
        width: 70px;
        line-height: 70px;
      }
    }
  }
  .GraphicDetails{
      margin-top: 7px;
    padding: 3px;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    .details{
    height: 300px;
      border-radius: 10px;
      padding-left: 20px;
     background: white;

    }
  }
}
</style>